<template>
  <el-select
    v-model="selectVal"
    :placeholder="placeholder"
    :loading="loading"
    :multiple="multiple"
    :filterable="filterable"
    :clearable="clearable"
    :disabled="disabled"
    :collapse-tags="multiple && !disabled"
    @change="handleChange"
  >
    <el-option
      v-for="(item, key) in dataSource"
      :key="key"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import { queryManageAreaService } from '@api/supplier/returnVisteManage';
export default {
  name: 'ManagementAreaSelect',
  props: {
    value: [String, Number, Array],
    multiple: { type: Boolean, default: false },
    filterable: { type: Boolean, default: true },
    clearable: { type: Boolean, default: false },
    placeholder: { type: String, default: '请选择管理区域' },
    disabled: { type: Boolean, default: false },
    hiddenKeys: { type: Array, default: function () { return [] } },
    defaultValue: String,
    hrAreaId: String,
  },
  data () {
    const selectVal = this.defaultValue || ''
    return {
      loading: false,
      selectVal,
      dataSource: [],
    };
  },
  computed: {
    ...mapState('supplier/manageArea', [
      'manageArea',
    ]),
  },
  watch: {
    value: {
      handler (val) {
        if (this.multiple) {
          this.selectVal = val;
        } else {
          if (val) {
            this.selectVal = `${val}`;
            this.handleChange(val)
          }
        }
        // if (!this.multiple && val) {
        //   this.selectVal = `${val}`;
        // } else if (val && val.length) {
        //   this.selectVal = val;
        // }
      },
      immediate: true,
    },
  },
  created () {
    if (this.manageArea && this.manageArea.length) {
      this.setDataSource(this.manageArea)
    } else {
      this.getManageAreaData()
    }
  },
  methods: {
    ...mapMutations('supplier/manageArea', [
      'setManageArea',
    ]),
    async getManageAreaData () {
      this.loading = true
      const { result } = await queryManageAreaService()
      this.loading = false
      this.setDataSource(result)
    },
    setDataSource (result) {
      const { hiddenKeys, selectVal, hrAreaId } = this
      if (result && result.length) {
        this.setManageArea(result)
        result.forEach(item => {
          item.label = item.manageAreaName
          item.value = item.manageAreaId
        });
        this.dataSource = hiddenKeys.length ? result.filter(i => !hiddenKeys.includes(`${i.manageAreaId}`)) : result;
        if (this.multiple) {
          if (selectVal && selectVal.length) {
            const manageArea = this.dataSource.find(i => i.manageAreaId === selectVal)
            if (manageArea && manageArea.manageAreaId) {
              this.handleChange([manageArea.manageAreaId])
            }
          } else if (hrAreaId) {
            const manageArea = this.dataSource.find(i => i.hrAreaId === hrAreaId)
            if (manageArea && manageArea.manageAreaId) {
              this.selectVal = [manageArea.manageAreaId]
              this.handleChange([manageArea.manageAreaId])
            }
          }
        } else {
          if (selectVal) {
            const manageArea = this.dataSource.find(i => i.manageAreaId === selectVal)
            if (manageArea && manageArea.manageAreaId) {
              this.handleChange(manageArea.manageAreaId)
            }
          } else if (hrAreaId) {
            const manageArea = this.dataSource.find(i => i.hrAreaId === hrAreaId)
            if (manageArea && manageArea.manageAreaId) {
              this.selectVal = manageArea.manageAreaId
              this.handleChange(manageArea.manageAreaId)
            }
          }
        }
      }
    },
    handleChange (value) {
      // console.log('handleChange', value)
      // 值回显父组件
      this.$emit('input', this.selectVal);
      // change事件
      this.$emit('change', this.selectVal);
      // change事件
      if (this.multiple) {
        this.$emit('onSelected', this.dataSource.filter(i => value.includes(i.manageAreaId)))
      } else {
        this.$emit('onSelected', this.dataSource.find(i => i.manageAreaId == value))
      }
    },
    resetSelectVal () {
      this.selectVal = ''
    }
  }
};
</script>
